import BaseComponent from "../../../pages/BaseComponent";
import {Image, View} from "@tarojs/components";
import "./index.less"
import "./sky.less"
import "./xingguang.less"
import "./jiguang.less"
import {observer} from "mobx-react";
import {observable} from "mobx";


@observer
export default class Index extends BaseComponent {

  @observable chosIndex = 0;

  static defaultProps = {
    title: "",
    size: 1,
    classPrex: '',
    tipImage: ''
  };

  render() {

    const {title, size, classPrex, tipImage, disabled} = this.props;

    const views = [];
    for (let i = 0; i < size; i++) {
      let className = this.chosIndex == i ? classPrex + (i + 1) + '.press' : classPrex + (i + 1);
      views.push(<View className={className} onClick={() => {
        if (!disabled)
          this.chosIndex = i
      }
      }></View>);
      if (i < size - 1)
        views.push(<View className='line'></View>);
    }

    return (
      <View className='asmr'>
        <View className='content'>
          <View className='asmr_light_title'>{title}</View>

          <View className='light_list'>
            {
              views
            }
          </View>
        </View>
        {/*<View className='star_tip'></View>*/}
        {
          !!tipImage && <Image
            className='star_tip'
            src={tipImage}
          />
        }

      </View>
    );
  }
}
